<template>
  <div class="home">
    <div>
      {{ $store.state.num }}
    </div>
    <div>
      {{num1 }}
    </div>
    <div>{{total1}}</div>
    <div>
      <button @click="add">点击</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
//将计算属性用mapState函数包裹，它会自动调用这个函数，并且自动指向$store.state里面的变量
import { mapState } from 'vuex'
export default {
  data () {
    return {
      count: 10,

    }
  },
  name: "Home",
  computed:
    //mapState(['num', 'total']),
    mapState({
      num1: 'num',
      total1: 'total'
    }),



  methods: {
    add () {
      //点击按钮需要触发mutation
      this.$store.commit("updateNum", 1);
    },
  },
};
</script>
<style scoped>
</style>
